<template>


  <header>
      <div class="head_img" >
          <img src="../img/logo.png" class="img">
          <h1 class="top_font">计算机系</h1>  
      </div>
  <!-- 导航 -->

    
    <el-menu :default-active="activeIndex2" class="el-menu-demo nav" background-color="#5c307b" mode="horizontal" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" style="padding-left:270px;">

      <el-menu-item index="1"><router-link to="/nav" class="rl">首页</router-link></el-menu-item>
      <el-menu-item index="2" ><router-link to="/nsinews"  class="rl">北软新闻</router-link></el-menu-item>
      <el-sub-menu index="3">
          <template #title>学校概况</template>
          <el-menu-item index="3-1"><router-link to="/dean" class="rl">校长致辞</router-link></el-menu-item>
          <el-menu-item index="3-2"><router-link to="/leader" class="rl">现任领导</router-link></el-menu-item>
          <el-menu-item index="3-3"><router-link to="" class="rl">组织机构</router-link></el-menu-item>
          <el-menu-item index="3-4"><router-link to="" class="rl">组织机构</router-link></el-menu-item>
          
      </el-sub-menu>
      <el-sub-menu index="4">
          <template #title>系部专业</template>
          <el-menu-item index="4-1"><router-link to="/soft" class="rl">软件开发</router-link></el-menu-item>
          <el-menu-item index="4-2"><router-link to="/accrued" class="rl">计算机应用</router-link></el-menu-item>
          <el-menu-item index="4-3"><router-link to="/bigdata" class="rl">大数据技术</router-link></el-menu-item>
          <el-menu-item index="4-4"><router-link to="/mobile" class="rl">移动应用</router-link></el-menu-item>
          <el-menu-item index="4-5"><router-link to="/cloud" class="rl">云计算机</router-link></el-menu-item>
      </el-sub-menu>
      <el-menu-item index="5"><router-link to="/teaTeam" class="rl">师资队伍</router-link></el-menu-item>
      <!-- <el-sub-menu index="6">
          <template #title>科学研究</template>
          <el-menu-item index="6-1"><router-link to="" class="rl">科研项目</router-link></el-menu-item>
          <el-menu-item index="6-2"><router-link to="" class="rl">科研机构</router-link></el-menu-item>
          <el-menu-item index="6-3"><router-link to="" class="rl">科研合作</router-link></el-menu-item>
          <el-menu-item index="6-4"><router-link to="" class="rl">科研成果</router-link></el-menu-item>
          <el-menu-item index="6-5"><router-link to="" class="rl">学术交流</router-link></el-menu-item>
      </el-sub-menu> -->
      <el-sub-menu index="7">
          <template #title>招生就业</template>
          <el-menu-item index="7-1"><router-link to="/plan" class="rl">招生计划</router-link></el-menu-item>
          <el-menu-item index="7-2"><router-link to="/publicity" class="rl">招生宣传</router-link></el-menu-item>
          <el-menu-item index="7-3"><router-link to="" class="rl">就业工作</router-link></el-menu-item>
          <el-menu-item index="7-4"><router-link to="" class="rl">学生职业发展</router-link></el-menu-item>
  
      </el-sub-menu>
      <el-sub-menu index="8">
          <template #title>人才招聘</template>
          <el-menu-item index="8-1"><router-link to="" class="rl">招聘计划</router-link></el-menu-item>
          <el-menu-item index="8-2"><router-link to="" class="rl">招聘信息</router-link></el-menu-item>
          <el-menu-item index="8-3"><router-link to="" class="rl">我要应聘</router-link></el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="9">
          <template #title>走进北软</template>
          <el-menu-item index="9-1"><router-link to="/sclife" class="rl">校园日历</router-link></el-menu-item>
          <el-menu-item index="9-2"><router-link to="/scfg" class="rl">校园风光</router-link></el-menu-item>
          <el-menu-item index="9-3"><router-link to="" class="rl" >使用信息</router-link></el-menu-item>
      </el-sub-menu>
      <el-menu-item index="10"><a href="https://www.nsi-soft.com/" target="_brank" class="rl">学校官网</a></el-menu-item>
        <el-menu-item index="11"><a href="http://kk.nsi-soft.com/" target="_brank" class="rl">酷课网</a></el-menu-item>
  </el-menu>
  </header>

  <el-main>
      <router-view></router-view>
  </el-main>

  <footer>
    
         <div class="footer_text">
          <h4>其他链接</h4>
          <a>沈阳格微软件公司</a><br>
          <a>沈阳北软酷客网</a><br>
          <a>辽宁招生考试之窗</a><br>
          <a>辽宁省教育厅</a><br>
        </div>
       <div class="footer_img3">
          <img src="./assets/dt.png">
       </div>
       <div class="footer_img">
         <img src="./assets/ewm.jpg">
       </div>
       <div class="footer_img2">
         <img src="./assets/ewm2.jpg">
       </div>
   
       <p class="cop">Copyright 2012-2021：沈阳北软信息职业技术学院辽ICP备17002625号-1地址：辽宁省沈阳市沈北路53号 联系电话：024-88928718</p>
  </footer>
  
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
 name: 'App',

  setup() {
    const activeIndex = ref('1')
    const activeIndex2 = ref('1')
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath)
    }
    return {
    
      activeIndex,
      activeIndex2,
      handleSelect,
    }
  },
})
</script>

<style>
body{
  margin: 0;
  padding: 0;
}
/* .nav{
  background-image: linear-gradient(to right,rgb(130,48,142)0%,rgb(42,39,167)100%);
} */
.el-sub-menu .el-menu-item{
   background-image: linear-gradient(to right,rgb(130,48,142)0%,rgb(42,39,167)100%);
  }
  .el-menu-item:hover{
    background-image: linear-gradient(to right,rgb(130,48,142)0%,rgb(42,39,167)100%);
  }
.head_img{
    height: 95px;
    /* background-color: #313031; */
    background-image:url('assets/logo1.png');
    width: 100%;
}
.img{
  float: left;
  padding-left: 80px;
  margin: 0 auto;
}
.top_font {
    display: inline;
    color: #fff;
    font-family: 'kaiti';
    float: left;
    font-size: 3em;
    font-weight:bold;
    padding-top: 20px;
    padding-left: 80px;
    margin: 0 auto;
    
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.rl{
  color: #fff;
  text-decoration: none;
}

header{
    height: 30%;
}
footer {
    background:-webkit-linear-gradient(top,#726e6e,#302d2d); 
    color: rgb(175, 172, 172);
    height:230px;
}

.el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    padding: 0;
    margin: 0;
    
}


.box a{display: block;position: relative;padding-top: 38px;text-decoration:none;}
.box.img{display: block; position: absolute;z-index: 1; top: 0;left: 50%;margin-left: -42px; width: 84px;height: 84px;border-radius: 50%;border: 1px dashed #d39928;transition: 0.6s all;}
.box .text{height: 150px;background:#fff;position: relative;z-index: 3; padding: 3.375rem 1.25rem 1.25rem;box-shadow: 0px 1px 6px 0px rgba(98, 98, 98, 0.16);transition: 0.6s all;}
.box h5{color: #333;}
.box .pic{position: absolute;z-index: 4; top: 7px;left: 50%;margin-left: -35px; width: 70px;height: 70px;border-radius: 50%;overflow: hidden;}
.box .pic img{display: block;width: 70px;height: 70px;border-radius: 50%;transition: 0.6s all;}
.box:hover .img{border: 1px solid #e6d6e8;background: #e6d6e8;transition: 0.6s all;}
.box:hover .pic img{transition: 0.6s all;transform: scale(1.1);}

.box .text::after{
  content: "";position: absolute;z-index: 1; top: 0;left: 0; width: 100%;height: 2px;transition:height 1s;-moz-transition:height 1s; /* Firefox 4 */-webkit-transition:height 1s; /* Safari and Chrome */
   background-image: -moz-linear-gradient( 90deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
}
.box .text h5{position: relative;z-index: 2; font-size: 1rem;color: #323232;line-height: 1.625rem;height: 3.25rem;overflow: hidden;font-weight: normal;margin-bottom: 0.625rem;}
.box:hover .text::after{box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);height: 100%;}
.box:hover .text h5{color: #fff;}

h2 {
    text-align: left;
    font-size: 20px;
    line-height: 70px;
    color: #22132d;
    text-indent: 22px;
    zoom: 1;
    margin-top: 0;
    padding-left: 100px;
    font-family: '宋体';
}

.footer_text{display: inline; float: left; margin-left: 300px;}
.footer_img3{display: inline; float: left;margin-left:80px;}
.footer_img3 img{width: 280px; height: 130px; margin: 22px;}
.footer_img{display: inline; float: right;margin-right:300px;}
.footer_img img{width: 130px; height: 130px; margin: 22px;}
.footer_img2{display: inline; float: right;}
.footer_img2 img{width: 130px; height: 130px; margin: 22px;}
   
.cop{padding-top:180px; }

.ydate {
    width: 58px;
    border: 1px solid #d8d8d8;
    color: #7d7d7d;
    text-align: center;
    font-size: 12px;
    float: left;
    padding-bottom: 5px;
}
.ydate_2 {
    border: 1px solid #edeaf1;
    color: #5b317d;
    background: #edeaf1;

}
.ydate span {
    display: block;
    font-size: 24px;
    line-height: 24px;
    padding: 8px 0 2px 0;
    zoom: 1;
}
.news {
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
}
.newslist {
    margin: 0;
    margin-left: 30px;
    margin-top: 30px;
    padding-bottom: 40px;
    padding-left: 20px;
    list-style:none;
}
.newslist .tn {
    margin-left: 80px;
    width: 210px;
}
.newslist h4{margin: 0;}
.newslist h4 a {
    color: #22132D;
    line-height: 22px;
    font-size: 16px;
    text-decoration: none;
}
.newslist p {
  margin: 0; 
  color: #777;
  font-size: 12px;
}
.newslist li {
    width: auto;
}
.focuslist h4 a {
	text-decoration: none;
    color: #22132D;
    line-height: 22px;
    font-size: 16px;
}
.focuslist li{
	float: left;
	width: 300px;
    margin: 0 15px 10px 15px;
    border-top: 2px solid #5c307d;
    height: 200px;
    overflow: hidden;
}
.focuslist p{
	color: #777;
    padding-top: 8px;
    font-size: 12px;
}
.yahei{
  margin: 0;
  padding: 0;
}
</style>
